<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>

    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <script src="../static/elementui/index.js"></script>
    <style>
        /*  div{
              border: solid #007DDB;
          }*/
        #all{
            margin-top: 80px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="all">
    学员详情
    <el-divider></el-divider>
    <div id="personal_detail">
        <br>
        <h3>基础信息</h3>
        <el-main>
            <el-row>
                <el-col :span="2"><div class="grid-content "><el-avatar size="large" :src="img"></el-avatar></div></el-col>
                <el-col :span="5"><div class="grid-content ">学员姓名：{{stuName}}</el-avatar></div></el-col>
                <el-col :span="17"><div class="grid-content "></div></el-col>
            </el-row>
        </el-main>
        <div id="table_1">
            <el-table :data="tableData" style="width:83%" :row-class-name="tableRowClassName">
                <el-table-column prop="signInTime" label="注册时间" width="300" :formatter="formatDate">
                </el-table-column>
                <el-table-column prop="signInWay" label="注册渠道" width="270">
                </el-table-column>
                <el-table-column prop="point" label="积分" width="260">
                </el-table-column>
                <el-table-column prop="offline" label="是否为线下学员" width="260">
                </el-table-column>
                <el-table-column prop="comments" label="备注" width="260">
                </el-table-column>
            </el-table>
        </div>
        <br>
        <div id="table_2">
            <el-table :data="tableData1" style="width: 84%;" :row-class-name="tableRowClassName">
                <el-table-column prop="telephone" label="手机号" width="195">
                </el-table-column>
                <el-table-column prop="stuLoginName" label="昵称" width="180">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="150">
                </el-table-column>
                <el-table-column prop="birthday" label="生日" width="220" :formatter="formatDate">
                </el-table-column>
                <el-table-column prop="education" label="学历" width="180">
                </el-table-column>
                <el-table-column prop="graduatedTime" label="毕业时间" width="220" :formatter="formatDate">
                </el-table-column>
                <el-table-column prop="plan" label="计划考试" width="155">
                </el-table-column>
            </el-table>
        </div>
        <h3>收货地址</h3>
        <div id="table_3">
            <el-table :data="tableData2" style="width: 58% " :row-class-name="tableRowClassName">
                <el-table-column prop="accept" label="收货人" width="180" align="center">
                </el-table-column>
                <el-table-column prop="telephone" label="手机号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收货地址" width="300" align="center">
                </el-table-column>
                <el-table-column prop="postcode" label="邮编" width="180" align="center">
                </el-table-column>
            </el-table>
        </div>
        <h3>交易信息</h3>
        <div id="table_4">
            <el-table :data="tableData3" style="width: 50%" :row-class-name="tableRowClassName">
                <el-table-column prop="sum" label="累计消费金额（元）" width="385" align="center">
                </el-table-column>
                <el-table-column prop="num" label="累计消费单数" width="385" align="center">
                </el-table-column>
            </el-table>
        </div>
        <h3>答题信息</h3>
        <div id="table_5">
            <el-table :data="tableData4" style="width: 86%" :row-class-name="tableRowClassName">
                <el-table-column prop="testTime" label="答题时间" width="220" :formatter="formatDate" align="center">
                </el-table-column>
                <el-table-column prop="test.testName" label="试卷名称" width="220" align="center">
                </el-table-column>
                <el-table-column prop="test.quesNum" label="题目数量" width="220" align="center">
                </el-table-column>
                <el-table-column prop="rightNum" label="做对数量" width="220" align="center">
                </el-table-column>
                <el-table-column prop="testDuration" label="答题时长/分钟" width="220" align="center">
                </el-table-column>
                <el-table-column prop="accuracy" label="正确率" width="220" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>

</body>
<script>

    //获取URL参数的函数
    let getQueryVariable = function(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    let myId= getQueryVariable("id");
   /* console.log(myId);*/


    /*---------------------------------------------------------------------*/

    let vm = new Vue({
        el: "#all",
        data: {
            stuName:'',
            myId,
            dialogTableVisible: false,
            tableData: [],
            tableData1:[],
            tableData2:[],
            tableData3:[],
            tableData4:[],
            img:"",
        },
        created() {
            this.getStudentBeanById();
            this.getAddressList();
            this.getOrder();
            this.getTest();
          //  this.getStatusList();
        },
        methods: {
            //时间格式化
            formatDate:function(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                // if (this.$MyComm.isEmpty(data)) {
                // 	return ''
                // }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            },
            getOrder() {
                axios.get("../student/findOrder", {
                    params: {
                        myId: this.myId,
                    }
                })
                    .then(res => {
                        console.log(res.data)
                        let arr = new Array(1);
                        arr[0] = res.data.data
                        this.tableData3 = arr
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            getTest() {
                axios.get("../student/findTest", {
                    params: {
                        myId: this.myId,
                    }
                })
                    .then(res => {
                        console.log(res.data)
                        this.tableData4 = res.data.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            getAddressList() {
                axios.get("../student/findAllAddress", {
                    params: {
                        myId: this.myId,
                    }
                })
                    .then(res => {
                        console.log(res.data)
                        let arr = res.data.data
                        arr.forEach(e => {
                            let address = e.province+"省 "+ e.city +"市 "+e.area+"区/县 "+ e.addr
                            e['address'] = address
                        });
                        this.tableData2 = arr
                   /*     let arr = res.data.data
                        for(let i = 0 ; i< this.arr.length(); i++){
                            console.log(arr[i].province)
                            console.log(arr[i].city)
                            let province = arr[i].province;
                            let city = arr[i].city;
                            let area = arr[i].area;
                            let addr = arr[i].addr;
                            let address =province+"省"+city+"市"+area+"区/县"+addr;
                            arr[i].area = address;
                        }*/
                      /*  let province = res.data.data.province;
                        let city = res.data.data.city;
                        let area = res.data.data.area;
                        let addr = res.data.data.addr;
                        let address =province+"省"+city+"市"+area+"区/县"+addr;*/
                       /* arr[1] = address
                        arr[0] = res.data.data*/

                    /*    let map = res.data.data
                        map['address'] = address
                        let arr = new Array(1);
                        arr[0]*/
                     //  this.tableData2 = arr
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            getStudentBeanById(){
                axios.get('../student/findOne', {
                    params: {
                        myId:this.myId,
                    }
                })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        console.log(res.data.data);
                    //   this.total = res.data.data.total;
                    //    this.tableData = res.data.data;
                     //   let map = res.data.data.data[0]
                     //   this.tableData=map

                      //  this.tableData = res.data.data;
                     //   vm.$data.tableData.push = res.data.data;
                    //    let map = res.data[0]
                     //   this.tableData = map
                        let arr = new Array(1);
                        arr[0] = res.data.data
                        this.tableData = arr
                        this.tableData1 = arr
                   //     console.log(this.tableData)
                       // this.tableData = res.data.data
                       // element.$data.tableData = res.data;
                  //      let arr = new Array(1);//固定数组长度为3
                 //       arr[0] = res.data.data;
                        let imgs = res.data.data.img
                        this.img ="../static/img/"+ imgs
                        console.log(this.img)
                        this.stuName = res.data.data.stuName;
                    //    this.signInTime = res.data.data.signInTime;
                   //     this.telephone = res.data.data.telephone;
                    //    this.point = res.data.data.point;
                    //    this.offline = res.data.data.offline;
                    //    this.stuLoginName = res.data.data.stuLoginName;
                    //    this.gender = res.data.data.gender;
                    //    this.birthday = res.data.data.birthday;
                     //   this.education = res.data.data.education;
                     //   this.graduatedTime = res.data.data.graduatedTime;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            reset() {
                this.stuName = ''
                this.telephone = ''
                this.offline = ''
                this.gender = ''
                this.statusList.id = ''
                this.getAdminList();
            },
            del(row,index) { //删除
                this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'DELETE',
                        url: '../student/del/'+ row.id,
                    }).then(res =>{
                        if(res.data.code ===200 ){
                            //删除当前选中行
                            // console.log(vm.tableData);
                            vm.tableData.splice(index,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else{
                            this.$message({
                                message:res.data.message
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        }
    })

</script>
</html>